import React, { useEffect, useRef, useState } from 'react'
import './app.css'
const listData=new Array(1000).fill(0).map((item,index)=>{
    return {
        id:index,
        value:index
    }
})
export default function App() {
  const [startOffset,setStartOffset]=useState(0)//占位容器的偏移距离
  const [startIndex,setStartIndex]=useState(0)//可视区域的起始索引
  const [endIndex,setEndIndex]=useState(0)//可视区域的结束索引
  const listRef=useRef(null)//获取的是container的dom结构
  useEffect(()=>{
    //计算可视区域的结束索引
    setEndIndex(startIndex+visibleCount)
  },[startIndex])
  //列表总高度
  const listHeight=listData.length*50
  //可视窗口高度
  const containerHeight=500
  //可视窗口可以展示的数量
  const visibleCount=Math.ceil(containerHeight/50)
  //上方的偏移量对应的style
  const getTransform={
    transform:`translateY(${startOffset}px)`
  }
  //截取数据用于展示
  const visibleData=listData.slice(startIndex,Math.min(endIndex,listData.length))
  const scrollEvent=()=>{
    // console.log(listRef.current.scrollTop);
    const scrollTop=listRef.current.scrollTop//获取滚动容器垂直滚动的距离
    //重新计算起始下标
    setStartIndex(Math.floor(scrollTop/50))
    //重新计算占位容器的偏移量
    setStartOffset(scrollTop-(scrollTop%50))//表示没有完全移出则跟着向外移，只有全部移除才添加完整偏移量
  }
  return (
    // 可视窗口
    <div className='container' onScroll={scrollEvent} ref={listRef}>
      {/* 占位窗口，每向上滚动一个元素，占位窗口就向上移动一个元素的高度，便于下次窗口向下滚动，不然滚不动 */}
      <div className="list-phantom" style={{height:listHeight}}></div>
      <div className="list" style={getTransform}>
        <ul>
          {
            visibleData.map(item=>(
              <li key={item.id}>{item.value}</li>
            ))
          }
        </ul>
      </div>
    </div>
  )
}
